<template>
  <div class="footer-container" style="z-index:30;">
    <van-popup
      v-model="bottom_popup"
      position="bottom"
      :overlay="false"
      round
      :style="{ width: '100%', bottom:'50px'}"
    >
      <van-grid>
        <van-grid-item v-for="item in fsection" :key="item.index">
          <div @click="selectfsectipn(item)">
            <van-image :src="item.image" round width="40px" height="40px" />
            <br />
            <span>{{item.name}}</span>
          </div>
        </van-grid-item>
      </van-grid>
    </van-popup>
    <van-overlay :show="overlayShow" z-index="20" />

    <van-tabbar route style="z-index:30;">
      <van-tabbar-item icon="home-o" to="/Home" @click="footerclick">首页</van-tabbar-item>
      <van-tabbar-item icon="./static/icon/froum_icon.png" to="/Forum" @click="footerclick">板块</van-tabbar-item>
      <van-tabbar-item icon="./static/icon/write.png" @click="releaseclick">发布</van-tabbar-item>
      <van-tabbar-item icon="./static/icon/msg1_icon.png" to="/Message" @click="footerclick">消息</van-tabbar-item>
      <van-tabbar-item icon="./static/icon/mine_icon.png" to="/Account" @click="footerclick">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'myFooter',
  data() {
    return {
      bottom_popup: false,
      overlayShow: false,
    }
  },
  computed: {
    ...mapState(['pageControl']),
    fsection() {
      var Psections = []
      for (var i in this.pageControl.sectionlist) {
        if (this.pageControl.sectionlist[i].fsection === null) {
          Psections.push(this.pageControl.sectionlist[i])
        }
      }
      return Psections
    }
  },
  methods: {
    selectfsectipn(item) {
      console.log(item)
      this.overlayShow = false
      this.bottom_popup = false
      this.$router.push({ path: `/release/${item.id}` })
    },
    footerclick(){
      this.overlayShow = false
      this.bottom_popup = false
    },
    releaseclick(){
      this.overlayShow = !this.overlayShow
      this.bottom_popup = !this.bottom_popup
    }
  }
}
</script>
